<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:body>
        
        <ui:composition template="/templates/template.xhtml">
            
            <ui:define name="content">
                

                <h:form>
                    <b><h:outputLabel value="#{tasks.currentRoom} - Oppgave #{tasks.taskNumber}/#{tasks.numberOfTasks}"></h:outputLabel></b>
                    <b><h:outputLabel style=" float: right;" value="Poeng: #{tasks.points}"></h:outputLabel></b>
                   
                    
                    <br/><br/>
                    <div class="custom_button">
                    <h:commandLink styleClass="button" value="Lagre og Avslutt" action="../protected/chooseGame.xhtml"></h:commandLink>
                    </div>
                    <br/><br/>
                    <b><h:outputLabel style=" font-size: large" value="#{tasks.currentTask.text}"></h:outputLabel></b>
                    <br/><br/>
                    <h:panelGroup rendered="#{tasks.imageOrNot}" id="images">
                        <ui:repeat value="#{tasks.imageList}" var="image">
                            <h:graphicImage rendered="#{tasks.imageOrNot}" value="#{image}" />
                        </ui:repeat>
                    </h:panelGroup>
                    <br/>
                    <b><h:outputLabel value="Alternativ 1: " rendered="#{tasks.currentTask.doHaveAlt}"></h:outputLabel></b>
                    <h:outputLabel value="#{tasks.alt1CurrentTask}" rendered="#{tasks.currentTask.doHaveAlt}"></h:outputLabel>
                    <br/>
                    <b><h:outputLabel value="Alternativ 2: " rendered="#{tasks.currentTask.doHaveAlt}"></h:outputLabel></b>
                    <h:outputLabel value="#{tasks.alt2CurrentTask}" rendered="#{tasks.currentTask.doHaveAlt}"></h:outputLabel>
                    <br/>
                    <b><h:outputLabel value="Alternativ 3: " rendered="#{tasks.currentTask.doHaveAlt}"></h:outputLabel></b>
                    <h:outputLabel value="#{tasks.alt3CurrentTask}" rendered="#{tasks.currentTask.doHaveAlt}"></h:outputLabel>
                    <br/><br/>
                    <b><h:outputLabel value="Hvilket alternativ er riktig: " rendered="#{tasks.currentTask.doHaveAlt}"></h:outputLabel></b>
                    <b><h:outputLabel value="Svar: " rendered="#{not tasks.currentTask.doHaveAlt}"></h:outputLabel></b>

                    <h:inputText id="dd" value="#{tasks.answer}">
                        <f:convertNumber maxIntegerDigits="10" />
                    </h:inputText>
                    <h:message for="dd" styleClass="errorMessage"/>
                    <br/><br/><br/>
                    <div class="custom_button">
                    <h:commandLink rendered="#{not tasks.ifLastQuestions}" styleClass="button" value="Neste" actionListener="#{tasks.loadNextTask()}" action="../protected/taskDisplay.xhtml"></h:commandLink>
                    
                    <h:commandLink rendered="#{tasks.ifLastQuestions}" styleClass="button" value="Ferdig" actionListener="#{tasks.finishGame()}" action="../protected/result.xhtml"></h:commandLink>
                    <a id="hint_button" class="button" onclick="document.getElementById('hint_box').style.display = 'block'; document.getElementById('blanket').style.display = 'block'"><b>Hint</b></a>
       
                    </div>
                                   
                    <div id="hint_box"><a onclick="document.getElementById('hint_box').style.display = 'none'; document.getElementById('blanket').style.display = 'none';"><span class="exit_cross">X</span></a>
                    
                        <h:graphicImage styleClass="hint_image" alt="Hint" url="#{tasks.imageHint}"/>
                    </div>
                </h:form>

            </ui:define>
            
        </ui:composition>
        
    </h:body>
</html>
